<template>
    <div class="page-hero" v-if="model">
        <div class="topbar bg-black py-2 px-3 d-flex ai-center">
      <img src="../assets/img/logo.png" height="30" />
      <div class="px-3 flex-1">
        <span class="text-white">王者荣耀</span>
        <span class="mx-3 fs-xxs text-white">攻略站</span>
      </div>
      <router-link to="/" tag="div" class="text-white">更多英雄 &gt;</router-link>
    </div>
    <div class="top" :style="{'background-image':`url(${model.banner})`}">
        <div class="info text-white p-3 h-100 d-flex flex-column jc-end">
            <div>{{model.title}}</div>
            <h2 class="py-2">{{model.name}}</h2>
            <div>{{model.categories.map(v => v.name).join('/')}}</div>
            <div class="d-flex jc-between">
                <div class="scores" v-if="model.scores">
                <span>难度</span>
                <span class="badge bg-primary">{{model.scores.difficult}}</span>
                <span>技能</span>
                <span class="badge bg-blue-1">{{model.scores.attack}}</span>
                <span>攻击</span>
                <span class="badge bg-danger">{{model.scores.skills}}</span>
                <span>生存</span>
                <span class="badge bg-dark">{{model.scores.survive}}</span>
            </div>
            <router-link to="/" tag="span" class="text-white">皮肤:2 &gt;</router-link>
            </div>
        </div>
    </div>
    <!-- top end -->
    <div>
        <div class="bg-white px-3">
            <div class="nav d-flex jc-around pt-3 pb-2 border-bottom">
                <div class="nav-item active">
                    <div class="nav-link">英雄攻略</div>
                </div>
                <div class="nav-item">
                    <div class="nav-link">进阶攻略</div>
                </div>
            </div>
        </div>
        <swiper>
            <swiper-slide>
                <div>
                    <div class="p-3 bg-white border-bottom">
                        <div class="d-flex">
                            <router-link tag="button" to="/" class="btn btn-lg flex-1 ml-2">
                                <i class="iconfont icon-caidan1"></i>
                                英雄介绍视频
                            </router-link>
                            <router-link tag="button" to="/" class="btn btn-lg flex-1 ml-2">
                                <i class="iconfont icon-caidan1"></i>
                                一图识英雄
                            </router-link>
                        </div>
                        <div class="skills mt-4">
                        <div class="d-flex jc-around">
                            <img class="icon"
                            :class="{active:currentSkillIndex === i}"
                            :src="item.icon" v-for="(item,i) in model.skills" :key="item.name"
                            @click="currentSkillIndex = i"
                            width="70" height="70">
                        </div>
                        <div v-if="currentSkill">
                            <div class="d-flex my-4">
                                <h3>{{currentSkill.name}}</h3>
                                <span class="text-grey-1 ml-4">
                                    (冷却值:{{currentSkill.delay}}
                                    消耗:{{currentSkill.cost}})
                                </span>
                            </div>
                            <p class="pb-3">{{currentSkill.desciption}}</p>
                            <div class="border-bottom"></div>
                            <p class="text-grey-1 py-2">小提示:{{currentSkill.tips}}</p>
                        </div>
                    </div>
                    </div>
                    <m-card icon="caidan1" title="出装推荐" class="hero-items">
                        <div class="fs-xl">顺风出装</div>
                        <div class="d-flex jc-around text-center mt-3">
                            <div v-for="item in model.items1" :key="item.name">
                                <img :src="item.icon" class="icon">
                                <div>{{item.name}}</div>
                            </div>
                        </div>
                        <div class="fs-xl mt-4">逆风出装</div>
                        <div class="d-flex jc-around text-center mt-3">
                            <div v-for="item in model.items2" :key="item.name">
                                <img :src="item.icon" class="icon">
                                <div>{{item.name}}</div>
                            </div>
                        </div>
                    </m-card>
                    <m-card icon="caidan1" title="使用技巧">
                        <p>{{model.usageTips}}</p>
                    </m-card>
                    <m-card icon="caidan1" title="对抗技巧">
                        <p>{{model.battleTips}}</p>
                    </m-card>
                    <m-card icon="caidan1" title="团战思路">
                        <p>{{model.teamTips}}</p>
                    </m-card>
                </div>
            </swiper-slide>
        </swiper>
    </div>
    </div>
    
</template>

<script>
export default {
    props:{
        id:{ required:true }
    },
    data(){
        return{
            model:null,
            currentSkillIndex:0
        }
    },
    computed:{
        currentSkill(){
            return this.model.skills[this.currentSkillIndex]
        }
    },
    methods:{
        async fetch(){
           const res =  await this.$http.get(`/heroes/${this.id}`)
           this.model = res.data
        }
    },
    created(){
        this.fetch()
    }
}
</script>
<style lang="scss">
@import '../assets/scss/variables';
    .page-hero{
        .top{
            height: 50vw;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .info{
            background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
            .scores{
                .badge{
                    margin: 0 0.25rem;
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    border-radius: 50%;
                    line-height: 0.9rem;
                    font-size: 0.6rem;
                    border: 1px solid rgba(255,255,255,.3);
                }
            }
        }
        .skills{
            img.icon{
                border: 3px solid map-get($colors, 'white' );
                &.active{
                border: 3px solid map-get($colors, 'primary' );
                }
                border-radius: 50%;
            }
        }
        .hero-items{
            img.icon{
                width: 3.8462rem;
                height: 3.8462rem;
                border-radius: 50%;
            }
        }
    }
</style>